<script setup>
	import {
		reactive,
		ref,
		nextTick
	} from 'vue'
	import {
		qrySpListApi
	} from '@/api/coach.js'
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		useLongLatStore
	} from '@/stores/index'

	// 经纬度
	const longLatStore = useLongLatStore()
	// 全局页面数据
	const data = reactive({
		barHeight: 0,
		navHeight: 0,
		menuButtonHeight: 0,
		menuButtonMargin: 0,
		distanceType: '',
		regionType: '',
		regionList: [],
		distance: '',
		sortType: '1',
		pageNo: 1, // 当前页码
		pageSize: 10, // 每页数量
		totalPages: 10, // 总页数
		status: 'loadmore',
		list: [],
		typeCode: '',
		controlIndex: undefined
	})

	onLoad((option) => {
		console.log('option: ', option);
		data.currentCity = uni.getStorageSync('currentCity') || {}
		getList()
	})
	const coachList = ref()
	// 获取场馆列表
	const getList = () => {

		data.status = 'loading';
		// 获取教练列表
		qrySpListApi({
			pageSize: data.pageSize,
			pageNum: data.pageNo,
			latitude: longLatStore.info.latitude,
			longitude: longLatStore.info.longitude,
			cityCode: data.currentCity.code,
			qryType: 2,
			bizType: data.typeCode,
		}).then(res => {
			res.data.map((item) => {
				item.tagLabel = item.tagLabel.split("|")
			})
			coachList.value = res.data
			console.log('coachList.value: ', coachList.value);
			const list = res.data
			const total = res.total
			// const { list, total } = res.data
			data.totalPages = Math.ceil(total / data.pageSize)
			data.pageNo === 1 ? data.list = list : data.list = [...data.list, ...list]
			data.pageNo++;
			data.status = data.pageNo >= data.totalPages ? 'nomore' : 'loadmore'
		})
	}

	const coachItem = ref()
	const goCoachDetai = (item, index) => {
		data.controlIndex = index
		coachItem.value = item
	}


	// 监听页面滚动到底部
	onReachBottom(() => {
		if (data.status !== 'loadmore') return
		getList()
	})

	// 确定选择
	const saveClick = () => {
		uni.$emit('coachItem', coachItem); // 发送事件和数据
		console.log('coachItem: ', coachItem);
		uni.navigateBack()
		// uni.navigateTo({
		// 	url: `/subPackage/venue/submit?coachItem=${coachItem.type}`
		// })
		// console.log('coachItem.value: ', coachItem.value);
	}
</script>
<template>
	<!-- 教练列表 -->
	<view class="coach-list">

		<view v-for="(item,index) in data.list" :key="item.spId" :class="data.controlIndex == index ? 'active' : ''"
			style="padding: 24rpx;     border: 2rpx solid #ccc;border-radius: 10rpx;	background-color: #fff;margin: 20rpx 0 ;"
			@click="goCoachDetai(item,index)">
			<view class="item">
				<image :src="item.spAvatar" style="width: 168rpx;height: 224rpx;" mode="aspectFill" />
				<view class="right">
					<view style="    margin-left: 30rpx;">
						<text>{{item.spName}}</text>
						<text class="goldMedalCoach" style="">{{ item.spLevel==='1' ? '金牌教练':'银牌教练'}}</text>
					</view>
					<view style="    margin: 18rpx 0 4rpx 18rpx;">
						<view style=" width: 444rpx; display: flex;">
							<view class="guidance" v-for="it in item.tagLabel">{{it}}
							</view>
						</view>
						<view class=""
							style="      margin: 10rpx 0;   text-align: center;display: flex;font-size: 32rpx;font-weight: bold;">
							<view style="width: 33.3%;color: #FF9D68;">{{item.score}}</view>
							<view style="width: 33.3%;border-left: 1rpx solid #ccc;border-right: 1rpx solid #ccc">
								{{item.serviceTime}}
							</view>
							<view style="width: 33.3%;">{{item.workYears}}</view>
						</view>
						<view class="" style="    text-align: center; display: flex;">
							<view style="width: 33.3%;font-size: 20rpx;">客户评分</view>
							<view style="width: 33.3%;font-size: 20rpx;">服务时长</view>
							<view style="width: 33.3%;font-size: 20rpx;">从业年限</view>
						</view>
					</view>
					<view style="margin-left: 30rpx;">
						<text style="white-space: nowrap;"><text
								style="color: #3F9742;font-size: 36rpx;">¥{{item.price}}</text>/次</text>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-bar">
			<view class="content">
				<up-button text="确定选择" type="primary" :disabled="false" shape="circle" @click="saveClick"></up-button>
			</view>
		</view>


	</view>
</template>



<style lang="scss" scoped>
	// 底部栏
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		height: 172rpx;
		background: #FFFFFF;
		border-top: 1rpx solid #E9E9EB;

		::v-deep .content {
			box-sizing: border-box;
			padding: 12rpx 40rpx;

			& .u-button {
				height: 88rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				// background: #FFA618;
				border-radius: 112rpx;
				border: none;
			}
		}
	}

	.active {
		border-color: #27a72f !important;
	}

	// 教练列表
	.coach-list {
		padding: 0 32rpx;
		padding-bottom: 54rpx;


		.item {
			display: flex;
			// align-items: center;
			// justify-content: space-between;
			margin-top: 24rpx;
			height: 218rpx;
			background: #FFFFFF;

			.left {
				width: 168rpx;
				height: 224rpx;
			}

			.right {

				.goldMedalCoach {
					margin-left: 10rpx;
					font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
					text-align: center;
					font-style: normal;
					text-transform: none;
					padding: 6rpx 10rpx 6rpx 10rpx;
					background: linear-gradient(121deg, #30BD25 0%, #6BE861 100%);
					border-radius: 0rpx 12rpx 12rpx 12rpx;

				}

				.guidance {
					margin-left: 11rpx;
					white-space: nowrap;
					background-color: #ccc;
					padding: 4rpx 12rpx !important;
					border-radius: 20rpx;
					font-size: 20rpx;
					width: 138rpx !important;
					text-align: center;
				}
			}
		}


	}
</style>